<template>
  <el-dialog
    title="编辑日志模板信息"
    :visible.sync="dialogVisible"
    :before-close="cancelDialog"
    :close-on-click-modal="false"
    class="mod_box"
    custom-class="role-mask"
  >
    <div style="height: 360px; overflow: hidden; overflow-y: scroll">
      <el-form class="form" label-width="115px">
        <el-form-item label="模板名称 : ">
          <el-input
            v-model="dialogInfo.icu_log_template_item_name"
            class="bianji"
          />
        </el-form-item>
        <el-form-item label="英文类型 : ">
          <el-input
            v-model="dialogInfo.icu_log_template_item_type"
            class="bianji"
          />
        </el-form-item>
        <el-form-item label="类型 : ">
          <el-select
            v-model="dialogInfo.icuLogTemplateId"
            placeholder="请选择"
            class="bianji"
          >
            <el-option
              v-for="item in arrlist"
              :key="item.id"
              :label="item.template_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排序 : ">
          <el-input v-model="dialogInfo.sort_num" class="bianji1" />
        </el-form-item>
        <el-form-item label="状态 : ">
          <el-switch
            v-model="dialogInfo.status"
            class="tablescope1"
            inactive-text="禁用"
            active-text="启用"
            :active-value="1"
            :inactive-value="2"
            active-color="#02538C"
            inactive-color="#B9B9B9"
          />
        </el-form-item>
        <el-form-item label="日志形式：" label-width="82">
          <el-radio-group v-model="dialogInfo.radio">
            <el-radio :label="0">发生记录</el-radio>
            <el-radio :label="1">过程记录</el-radio>
          </el-radio-group>
        </el-form-item>

        <div v-if="this.dialogInfo.radio === 0">
          <el-form-item label="同步至护理记录:" prop="synNursing">
            <el-switch
              v-model="dialogInfo.syn_nursing"
              class="tablescope2"
              inactive-text="是"
              active-text="否"
              :active-value="1"
              :inactive-value="0"
              active-color="#02538C"
              inactive-color="#B9B9B9"
            />
          </el-form-item>
          <el-form-item label="同步表名：" prop="synTable">
            <el-input
              v-model="dialogInfo.syn_table"
              placeholder="请输入同步表名"
              class="happen2"
            />
          </el-form-item>
          <el-form-item label="同步Code：" prop="synCode">
            <el-input
              v-model="dialogInfo.syn_code"
              placeholder="请输入同步Code"
              class="happen3"
            />
          </el-form-item>
          <el-form-item label="同步方式：" prop="synMethod">
            <el-switch
              v-model="dialogInfo.syn_method"
              class="tablescope2"
              inactive-text="是"
              active-text="否"
              :active-value="1"
              :inactive-value="0"
              active-color="#02538C"
              inactive-color="#B9B9B9"
            />
          </el-form-item>
          <el-form-item label="同步值：" prop="synValue">
            <el-input
              v-model="dialogInfo.syn_value"
              placeholder="请输入"
              class="happen2"
            />
          </el-form-item>
          <el-form-item label="同步值列表：" prop="synValueSelect">
            <el-input
              v-model="dialogInfo.syn_value_select"
              type="textarea"
              :rows="3"
              placeholder="请输入"
              class="happen2"
            />
          </el-form-item>
          <el-form-item label="排序：" prop="sortNum">
            <el-input
              v-model="dialogInfo.sort_num"
              placeholder="请输入"
              class="el-inputer1"
            />
          </el-form-item>
          <el-form-item
            label="护理措施模板内容:"
            prop="nursingBeginContent"
            label-width="129"
          >
            <el-input
              v-model="dialogInfo.nursing_begin_content"
              type="textarea"
              :rows="3"
              placeholder="请输入"
              class="happen4"
            />
          </el-form-item>
        </div>

        <div v-else-if="this.dialogInfo.radio === 1">
          <el-form-item label="同步至护理记录:" prop="synNursing">
            <el-switch
              v-model="dialogInfo.syn_nursing"
              class="tablescope2"
              inactive-text="是"
              active-text="否"
              :active-value="1"
              :inactive-value="0"
              active-color="#02538C"
              inactive-color="#B9B9B9"
            />
          </el-form-item>
          <el-form-item label="允许非计划终止:" prop="allowUnplanned">
            <el-switch
              v-model="dialogInfo.allow_unplanned"
              class="tablescope2"
              inactive-text="是"
              active-text="否"
              :active-value="1"
              :inactive-value="0"
              active-color="#02538C"
              inactive-color="#B9B9B9"
            />
          </el-form-item>
          <el-form-item label="同步表名：" prop="synTable">
            <el-input
              v-model="dialogInfo.syn_table"
              placeholder="请输入同步表名"
              class="happen2"
            />
          </el-form-item>
          <el-form-item label="同步Code：" prop="synCode">
            <el-input
              v-model="dialogInfo.syn_code"
              placeholder="请输入同步Code"
              class="happen2"
            />
          </el-form-item>
          <el-form-item label="同步方式：" prop="synMethod">
            <el-switch
              v-model="dialogInfo.syn_method"
              class="tablescope2"
              inactive-text="是"
              active-text="否"
              :active-value="1"
              :inactive-value="0"
              active-color="#02538C"
              inactive-color="#B9B9B9"
            />
          </el-form-item>
          <el-form-item label="排序：" prop="sortNum">
            <el-input
              v-model="dialogInfo.sort_num"
              placeholder="请输入"
              class="el-inputer1"
            />
          </el-form-item>
          <el-form-item label="同步值：" prop="synValue">
            <el-input
              v-model="dialogInfo.syn_value"
              placeholder="请输入"
              class="happen2"
            />
          </el-form-item>
          <el-form-item label="同步值列表：" prop="synValueSelect">
            <el-input
              v-model="dialogInfo.syn_value_select"
              type="textarea"
              :rows="3"
              placeholder="请输入"
              class="happen2"
            />
          </el-form-item>
          <el-form-item
            label="护理措施模板内容开始:"
            prop="nursingBeginContent"
          >
            <el-input
              v-model="dialogInfo.nursing_begin_content"
              type="textarea"
              :rows="3"
              placeholder="请输入"
              class="happen2"
            />
          </el-form-item>
          <el-form-item label="护理措施模板内容结束:" prop="nursingEndContent">
            <el-input
              v-model="dialogInfo.nursing_end_content"
              type="textarea"
              :rows="3"
              placeholder="请输入"
              class="happen2"
            />
          </el-form-item>
          <el-form-item
            label="护理措施模板内容非结束:"
            prop="nursingUnplannedEndContent"
          >
            <el-input
              v-model="dialogInfo.nursing_unplanned_end_content"
              type="textarea"
              :rows="3"
              placeholder="请输入"
              class="happen2"
            />
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelDialog_quxiao">取 消</el-button>
      <el-button type="primary" @click="cancelDialog">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { List, add, check, icuLogTemplateItemedit, getListlei, icuLogTemplatequeryList, icuLogTemplateItemDictionarygetList } from '@/api/table'
import axios from 'axios'

export default {
  name: 'Index',
  components: {},
  // 父组件 传 过来的 值
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      radio: 1,
      arrlist: []
    }
  },
  data() {
    return {}
  },
  watch: {
    // 监听 弹窗显示， 可以用来写 请求接口
    dialogVisible: function(newVal, oldVal) {
      if (newVal) {
        console.log(newVal)
      }
    }
  },
  created() {},
  mounted() {
    icuLogTemplatequeryList().then((res) => {
      this.arrlist = res.data
    })
  },
  methods: {
    cancelDialog_quxiao() {
      this.$emit('update:dialogVisible', false)
    },
    // 修改父组件传过来的值
    cancelDialog() {
      this.$emit('update:dialogVisible', false)
      icuLogTemplateItemedit({
        id: this.dialogInfo.id,
        icuLogTemplateId: this.dialogInfo.icuLogTemplateId,
        icuLogTemplateItemName: this.dialogInfo.icu_log_template_item_name,
        icuLogTemplateItemType: this.dialogInfo.icu_log_template_item_type,
        logForm: this.dialogInfo.radio,
        allowUnplanned: this.dialogInfo.allowUnplanned,
        synNursing: this.dialogInfo.synNursing,
        nursingBeginContent: this.dialogInfo.nursingBeginContent,
        nursingEndContent: this.dialogInfo.nursingEndContent,
        nursingUnplannedEndContent: this.dialogInfo.nursingUnplannedEndContent,
        status: this.dialogInfo.status,
        sortNum: this.dialogInfo.sortNum,
        synTable: this.dialogInfo.synTable,
        synCode: this.dialogInfo.synCode,
        synValueSelect: this.dialogInfo.synValueSelect,
        synValue: this.dialogInfo.synValue,
        synMethod: this.dialogInfo.synMethod
      }).then((res) => {

      })
    }

  }
}
</script>
<style lang='scss' scoped>
.form {
  padding: 0 10px;
}

//弹窗里的是 否
.tablescope2 {
  position: relative !important;
  left: -24px !important;

  ::v-deep .el-switch__label--left {
    position: relative;
    left: 48px;
    color: #fff;
    z-index: -1111;
  }
  ::v-deep .el-switch__core {
    width: 50px !important;
  }
  ::v-deep .el-switch__label--right {
    position: relative;
    right: 48px;
    color: #fff;
    z-index: -1111;
  }
  ::v-deep .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  ::v-deep .el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c !important;
  }
}

//弹窗里的状态
.tablescope1 {
  position: relative !important;
  left: -37px !important;

  ::v-deep .el-switch__label--left {
    position: relative;
    left: 59px;
    color: #fff;
    z-index: -1111;
  }
  ::v-deep .el-switch__core {
    width: 58px !important;
  }
  ::v-deep .el-switch__label--right {
    position: relative;
    right: 59px;
    color: #fff;
    z-index: -1111;
  }
  ::v-deep .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  ::v-deep .el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c !important;
  }
}
.role-mask {
  border-radius: 6px;
}
.role-mask .el-dialog__header {
  border-bottom: 1px solid #e8eaec;
}

.role-mask .el-dialog__body {
  padding: 16px 16px 0px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

.role-mask .el-dialog__footer {
  border-top: 1px solid #e8eaec;
}
.demo-ruleForm {
  height: auto;
  overflow-x: scroll;
  overflow-y: scroll;
}

@media screen and (min-width: 1200px) and (max-width:1365px) {
  .bianji {
    width: 94%;
  }
  .bianji1 {
    width: 48%;
  }
  .happen {
    width: 95%;
  }
  .happen1 {
    width: 94%;
  }
  .happen2 {
    width: 94%;
  }
  .happen3 {
    width: 94%;
  }
  .happen4 {
    width: 58%;
  }
  .inputer1 {
    width: 94%;
  }
  .inputer2 {
    width: 93%;
  }
  .inputer3 {
    width: 93%;
  }
  .mod_box {
    width: 66%;
  }
}

@media screen and (min-width: 1366px) and (max-width:1600px) {
  .bianji {
    width: 95%;
  }
  .bianji1 {
    width: 45%;
  }
  .happen {
    width: 95%;
  }
  .happen1 {
    width: 94%;
  }
  .happen2 {
    width: 95%;
  }
  .happen3 {
    width: 95%;
  }
  .happen4 {
    width: 60%;
  }
  .inputer1 {
    width: 94%;
  }
  .inputer2 {
    width: 94%;
  }
  .inputer3 {
    width: 94%;
  }
  .mod_box {
    width: 60%;
  }
}

@media screen and (min-width: 1800px) {
  .bianji {
    width: 94%;
  }
  .bianji1 {
    width: 50%;
  }
  .happen {
    width: 94%;
  }
  .happen1 {
    width: 94%;
  }
  .happen2 {
    width: 94%;
  }
  .happen3 {
    width: 94%;
  }
  .happen4 {
    width: 61%;
  }
  .inputer1 {
    width: 94%;
  }
  .inputer2 {
    width: 93%;
  }
  .inputer3 {
    width: 92%;
  }
  .mod_box {
    width: 44%;
    margin-left: 28%;
  }
}
</style>
